<template>
  <div>
    <div v-if="emptyFlag===true" class="seeinfo">分析结果为空，表明该项目与{{ infoflag }}不相交</div>
    <div id="cbstatisticsTableDiv" v-if="emptyFlag===false"
         style="width: 100%;  max-height: 400px;margin-top: 5px;"
    >
      <div class="tablename">分析结果统计表</div>
      <el-button v-show="showBtnDC"  size="mini" name="outputExcel" class="table-btn-right" style="margin-left: 20px;" type="warning"
                 plain @click="outputExcel"
      >导出分析统计表
      </el-button>
      <el-table
        :id="tableID"
        :data="staticsTable.staticsTableData"
        style="width: 100%"
        :header-cell-style="{background:'#cfffe2',color:'#63666b'}"
        border fit
      >
        <el-table-column
          v-for="(item,i) in staticsTable.staticsTableCols"
          :label="item.title"
          :prop="item.field"
          :min-width="100"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
      <!--        <v-chart class="chart" :option="option" autoresize/>-->
    </div>
  </div>
</template>

<script>


let FileSaver = require('file-saver')
let XLSX = require('xlsx')
import _ from 'lodash'
// import gConfig from '@/utils/GlobalConfig'
import Bus from '@/utils/bus'

export default {
  name: 'CbProStatisticTable',
  components: {
    /*'v-chart': ECharts*/
  },
  data() {
    return {
      tableID:null,
      option: {},
      showBtnBar: false,
      showBtnTJB: false,
      showBtnBZT: false,
      showBtnDC: true,
      showBtnFea: false,
      showStaticsPic: false,
      showStaticsTable: true,
      myEchart: null,
      echartType: 0, //0 echart图表 1统计表
      statisticsResultDiv: '',
      areaUnitsOptions: [],
      filedsOptions: [],
      showYiji: false,
      showOutExcel: false,
      config: {
        serviceStatisticsData: null,
        fieldData: [],
        fieldValues: {},
        statisticValueField: null, //统计值字段 相加的字段
        subMergeField: [],
        statisSeries: [],
        queryResultDataWithDZMJ: [], //查询分析统计的结果data，有叠置面积
        statisticField: null,
        areaUnit: null//统计的面积字段
      },
      analysisObject: {
        /*
         * @type String 图层标题
         */
        'layerCaption': '',
        'queryShowField': { 'en': '', 'cn': '' },
        /*
         * 字段对照表
         * @type Array 形如[{"en":"bsm","cn":"标识码"}]
         */
        'layerFields': [],
        /*
         * @type String 统计字段，如“dlbm”
         */
        'statisField': '',
        /*
         * 统计合并字段名称，如“qsdwmc”
         */
        'subMergeField': '',
        /*
         * 当前统计类型
         */
        'statisShowContent': '',
        'statisMulti': false,
        'statisContent': [],
        'statisSeries': [],
        'queryBtnTitle': '查询列表',
        'qsdmXzqDm': ''
      },
      colors: {
        'blackBlue': ['#011936', '#00343f', '#1db0b8', '#37c6c0', '#d0e9ff'],
        'highBlue': ['#33ccff', '#ff9617', '#19e4ff', '#00ffff', '#33ffe7'],
        'standard': ['#36e5ff', '#efff23', '#00ff64', '#ff9617', '#0d1836'],
        'standard1': ['#c12e34', '#0098d9', '#e6b600', '#2b821d', '#005eaa', '#339ca8'],
        'standard2': ['#00a9ad', '#d5feff'], //系统蓝绿配色
        'greenRed': ['#4ea397', '#22c3aa', '#7bd9a5', '#d0648a', '#f58db2', '#f2b3c9'],
        'redHigh': ['#893448', '#d95850', '#eb8146', '#ffb248', '#f2d643', '#ebdba4'],
        'yellowHigh': ['#ff715e', '#ffaf51', '#ffee51', '#797fba', '#715c87'],
        'eChartDefault': ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#5b7cbd'],
        'light': ['#fb7293', '#e7bcf3', '#8378ea', '#32c5e9', '#9fe6b8', '#37a2da', '#ffdb5c', '#f39e9e', '#f7e06f', '#6ff7d1'],
        'dark': ['#e69d87', '#8dc1a9', '#ea7e53', '#eedd78', '#73a373', '#73b9bc', '#7289ab', '#dd6b66', '#759aa0']
      }
    }
  },
  created() {
    this.createTableID();
  },
  computed: {
    emptyFlag() {
      if (this.staticsTable === null) {
        return true
      } else if (this.staticsTable.hasOwnProperty('stainfo')) {
        return true
      } else {
        return false
      }
    },
    finalTable() {
      if (this.staticsTable.hasOwnProperty('staticsTableData')) {
        return this.staticsTable
        // return JSON.parse(this.staticsTable);
      }
    }

  },
  props: {
    infoflag: null,
    staticsTable: {
      type: Object,
      default() {
        return null
      }
    }

  },
  mounted() {
    let that = this
  },
  methods: {
    outputExcel() {
      let that = this
        that.ExportExcelFile(that.tableID, "统计_"+that.infoflag)
    },
    /**
     * 字符串处理，移除，添加
     * @param {string} title
     * @param {string} removeStr
     * @param {string} addStr
     * @returns {string}
     */
    getSubTitle: function(title, removeStr, addStr) {
      var result = title.replace(removeStr, '')
      return result + addStr
    },
    ExportExcelFile(id, filename) {
      var that = this
      // 设置当前日期
      let time = new Date()
      let year = time.getFullYear()
      let month = time.getMonth() + 1
      let day = time.getDate()
      let name = year + '' + month + '' + day
      // console.log(name)
      /* generate workbook object from table */
      //  .table要导出的是哪一个表格
      var wb = XLSX.utils.table_to_book(document.getElementById(id))
      /* get binary string as output */
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        //  name+'.xlsx'表示导出的excel表格名字
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream' }),
          filename + '.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    },
    createGuid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx'.replace(/[xy]/g, function (c) {
        let r = Math.random() * 16 | 0,
          v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
      });
    },
    createTableID(){
      this.tableID=this.createGuid();
    },



  },
}
</script>

<style>
.table-btn-right{
  float: right;
}
.tablename{
  float: left;
  font-size: 20px;
}
.seeinfo {
  font-size: 20px;
  margin: 2px 0px 0px 0px;
  background-color: #d9ffe7;
}

::v-deep .el-table__header tr, .el-table__header th {
  padding: 0;
  height: 30px;
  font-size: 12px;
}

.analysis-statistics-form .el-select {
  width: 150px;
  margin: 5px;
}

.analysis-statistics-form {
  /*margin: 0px 10px 0px -80px;*/
  /*  margin:-30px -20px;*/
}

.statisticBtns {
  display: inline;
  margin-left: 20px;
  vertical-align: unset;
}

#myChart {
  width: 300px;
  height: 300px;
}
</style>
